<template>
    <div class="view">
        <div ref="header" class="nav-back">
            <span class="iconfont icon-fanhui" @click="back"></span>
            <span class="nickname">&nbsp;基本信息</span>
            <span class="save rt">保存</span>
        </div>
        <cube-scroll class="scroll" ref="scroll" :scroll-events="['scroll']" @scroll="scrollHandler">
            <div class="data-box">
                <div class="nickname flex"><span>昵称</span><span class="ellipsis">{{user.nickname}}</span></div>
                <div class="sex flex"><span>性别</span><span class="ellipsis">{{sex==1?'男':'女'}}</span></div>
                <div class="age flex" @click="showDatePicker"><span>出生日期</span>
                    <span class="ellipsis" v-if="user.birthday">{{user.birthday | timeStampToDay2}}&nbsp;&nbsp;
                        <i class="iconfont icon-youbian"></i>
                    </span>
                    <span class="ellipsis none-content" v-else>未填写&nbsp;&nbsp;
                        <i class="iconfont icon-youbian"></i>
                    </span>
                </div>
                <div class="height flex" @click="showCommonPicker('选择身高','height','snapHeight','HEIGHT')"><span>身高</span>
                    <span class="ellipsis" :class="{'none-content':self.snapHeight=='未填写'}">{{self.snapHeight}}&nbsp;&nbsp;
                        <i class="iconfont icon-youbian"></i>
                    </span>
                </div>
                <div class="education flex" @click="showEducationPicker"><span>学历</span><span class="ellipsis" :class="{'none-content':educationSnap=='未填写'}">{{educationSnap}}&nbsp;&nbsp;<i
                        class="iconfont icon-youbian"></i></span></div>
                <div class="income flex" @click="showIncomePicker"><span>月收入</span><span class="ellipsis" :class="{'none-content':incomeSnap=='未填写'}">{{incomeSnap}}{{incomeSnap.indexOf('-')>0?'元':''}}&nbsp;&nbsp;<i
                        class="iconfont icon-youbian"></i></span></div>
                <div class="home flex"><span>居住地</span><span class="ellipsis">福建漳州&nbsp;&nbsp;<i
                        class="iconfont icon-youbian"></i></span></div>
                <div class="arital-status flex"><span>婚姻状况</span><span class="ellipsis">未婚&nbsp;&nbsp;<i
                        class="iconfont icon-youbian"></i></span></div>
                <div class="children flex"><span>子女情况</span><span class="ellipsis">没有&nbsp;&nbsp;<i
                        class="iconfont icon-youbian"></i></span></div>
                <div class="house flex"><span>购房情况</span><span class="ellipsis">以后再告诉你&nbsp;&nbsp;<i
                        class="iconfont icon-youbian"></i></span></div>
                <div class="car flex"><span>购车情况</span><span class="ellipsis">没有&nbsp;&nbsp;<i
                        class="iconfont icon-youbian"></i></span></div>
            </div>

        </cube-scroll>
    </div>
</template>

<script lang="ts">
    import {Component, Vue} from "vue-property-decorator";
    import Scene from "@/render/Scene";
    import Http from "@/service/Http";

    import {Getter, Action, State, Mutation} from "vuex-class";
    import {InterfaceUser} from "@/interface/InterfaceUser";
    import {updateUser} from "@/store/dispatches";
    import CommonUnit from "@/unit/CommonUnit";
    import UserEntity from "@/entity/UserEntity";


    @Component({
        components: {}
    })
    export default class Mine extends Scene {
        @State("UserStore")
        public user!: InterfaceUser;
        private sex: any = "";//性别
        private baseInfo: any = {};//个人基本信息
        private datePicker: any = "";
        private commonPicker: any = "";
        private currentKey: string = "";
        private currentSnap: string = "";
        private currentChilrenKey: string = "";
        private currentKeyArray: string[] = [];
        private currentSnapArray: string[] = [];
        private birthday: string | number = "";
        private height: string | number = "";
        private heightSnap: string = "";
        private heightColumn: any[] = [];
        private education: string | number = "";
        private educationSnap: string = "";
        private educationColumn: any[] = [];
        private income: string | number = "";
        private incomeSnap: string = "";
        private incomeColumn: any[] = [];

        private get self(): InterfaceUser {
            return this.user;
        }

        private set self(user: InterfaceUser) {
            updateUser(user);
        }

        private async showCommonPicker(title: string, key: string, snap: string, type: string, subtitle: string = "", childrenKey: string = ""): Promise<any> {
            const toast = (<any> this).$createToast({
                time: 0,
                txt: "载入选项中...",
                mask: true
            }).show();
            this.currentKey = key;
            this.currentSnap = snap;
            this.currentChilrenKey = childrenKey;
            const result = await Http.get(this.api.getParameterItem, {type});
            const direKey: any[] = [(this as any).self[key] - 1];
            this.commonPicker.$updateProps({
                title: title,
                selectedIndex: (this as any).self[snap] !== "未填写" ? direKey : [0],
                subtitle: subtitle,
                data: [CommonUnit.resultToPickerData(result.data)],
            });
            toast.hide();
            this.commonPicker.show();
        }

        private selectCommonValue(value: any[], index: number[], text: string[]) {
            this.$set(this.self, this.currentKey, value.join(","));
            this.$set(this.self, this.currentSnap, text.join(","));

        }

        private showDatePicker(): void {//出生日期选择
            let nowYear = new Date().getFullYear();
            let maxYear = nowYear - 18;
            let minYear = nowYear - 100;
            let initYear = nowYear - 25;
            if (!this.datePicker) {
                (this as any).datePicker = (this as any).$createDatePicker({
                    title: "出生日期",
                    max: new Date(maxYear, 11, 31),
                    min: new Date(minYear, 0, 1),
                    value: this.user.birthday ? new Date(this.user.birthday * 1000) : new Date(initYear, 0, 1),
                    onSelect: this.selectDateHandle
                });
            }
            (this as any).datePicker.show();
        }

        private selectDateHandle(date: any, selectedVal: any, selectedText: any) {
            const birthday = Date.parse(date);
            this.$set(this.self, "birthday", birthday / 1000);
        }

        private selectHeightHandle(selectedVal: [], selectedIndex: [], selectedText: []) {
            this.heightSnap = selectedText.join(" ");
            this.height = selectedVal.join(", ");
        }

        private showHeightPicker(): void {//身高选择器
            (this as any).$createPicker({
                title: "身高",
                data: [this.heightColumn],
                onSelect: this.selectHeightHandle
            }).show();
        }

        private selectEducationHandle(selectedVal: [], selectedIndex: [], selectedText: []) {
            this.educationSnap = selectedText.join(" ");
            this.education = selectedVal.join(", ");
        }

        private showEducationPicker(): void {//学历选择器
            (this as any).$createPicker({
                title: "学历",
                data: [this.educationColumn],
                onSelect: this.selectEducationHandle
            }).show();
        }

        private selectIncomeHandle(selectedVal: [], selectedIndex: [], selectedText: []) {
            this.incomeSnap = selectedText.join(" ");
            this.income = selectedVal.join(", ");
        }

        private showIncomePicker(): void {//收入选择器
            (this as any).$createPicker({
                title: "学历",
                data: [this.incomeColumn],
                onSelect: this.selectIncomeHandle
            }).show();
        }

        private scrollHandler(pos: any): void {//scroll滚动事件
            //this.pullDownY = pos.y;
        }


        private back(): void {
            this.navigateBack();
        }


        private mounted(): void {
            this.sex = Number(sessionStorage.getItem("sex"));//1:男，2:女
            this.baseInfo = new UserEntity(this.user).getBaseInfo;
            this.birthday = this.baseInfo.birthday == 0 ? "未填写" : "";
            this.heightSnap = this.baseInfo.SNAP_HEIGHT;
            this.height = this.baseInfo.height;
            this.educationSnap = this.baseInfo.SNAP_EDUCATION;
            this.education = this.baseInfo.EDUCATION;
            this.incomeSnap = this.baseInfo.SNAP_INCOME;
            this.income = this.baseInfo.INCOME;
            this.commonPicker = (<any> this).$createPicker({
                title: "",
                data: [],
                onSelect: this.selectCommonValue,
            });
            Http.get(this.api.getParameterItem, {type: "HEIGHT"}, {token: this.user.token}).then((res) => {//获得身高数据列表
                if (res.code === 1) {
                    for (let i in res.data) {
                        let item: any = {};
                        item.value = res.data[i].alias;
                        if (res.data[i].alias == 1 || res.data[i].alias == 68) {
                            item.text = res.data[i].name;
                        } else {
                            item.text = res.data[i].name + "厘米";
                        }
                        this.heightColumn.push(item);
                    }
                } else {
                    (<any> this).$createToast({
                        time: 1000,
                        type: "error",
                        txt: "暂无身高数据!",
                        mask: true,
                    }).show();
                }
            });
            Http.get(this.api.getParameterItem, {type: "EDUCATION"}, {token: this.user.token}).then((res) => {//获得身高数据列表
                if (res.code === 1) {
                    for (let i in res.data) {
                        let item: any = {};
                        item.value = res.data[i].alias;
                        item.text = res.data[i].name;
                        this.educationColumn.push(item);
                    }
                } else {
                    (<any> this).$createToast({
                        time: 1000,
                        type: "error",
                        txt: "暂无学历数据!",
                        mask: true,
                    }).show();
                }
            });
            Http.get(this.api.getParameterItem, {type: "INCOME"}, {token: this.user.token}).then((res) => {//获得身高数据列表
                if (res.code === 1) {
                    for (let i in res.data) {
                        let item: any = {};
                        item.value = res.data[i].alias;
                        item.text = res.data[i].name;
                        this.incomeColumn.push(item);
                    }
                    console.log(this.incomeColumn);
                } else {
                    (<any> this).$createToast({
                        time: 1000,
                        type: "error",
                        txt: "暂无收入数据!",
                        mask: true,
                    }).show();
                }
            });
        }

    }
</script>

<style scoped lang="stylus">
    .view
        width 100vw;
        height 100vh;
        background $theme-page-common-background-color;

        .nav-back
            width 100vw;
            position fixed;
            top var(--safe-area-inset-top);
            left 0px;
            z-index: 100;
            color $theme-common-color;
            padding 15px 10px;
            padding-top calc(15px + var(--safe-area-inset-top));
            background rgba(255, 255, 255, 1);
            border-bottom 1px solid $theme-line-color;

            .save
                font-size 16px;

            .nickname
                font-size 16px;
                color $theme-common-color;

        .scroll
            position relative;
            height calc(100vh - var(--safe-area-inset-top) - var(--safe-area-inset-bottom) - 47px);
            margin-top 45px;
            background-color #fff;

            div.data-box
                > div
                    padding 15px;
                    border-bottom 1px solid $theme-line-color;
                    justify-content: space-between;

                    .none-content
                        color $theme-common-color;

                    i.icon-youbian
                        color $theme-viceColor-font;


</style>
